<template>
  <div>
    <!-- 图片上传 -->
    <!-- list-type : 指定文件列表的类型
         action : 必须参数，上传的地址
         file-list: 上传的文件列表
         limit: 最大允许上传个数
         on-preview: 点击文件列表中已上传的文件时的钩子
         on-remove:	文件列表移除文件时的钩子
         http-request:覆盖默认的上传行为，可以自定义上传的实现
         on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
     -->
    <el-upload
      action="#"
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog :visible="showDialog" @close="showDialog = false">
      <img style="width: 100%" :src="imgUrl" />
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },

  data() {
    return {
      showDialog: false, // 预览弹层的显示状态
      imgUrl: '', // 预览的图片地址
      fileList: [] // 上传图片列表
    }
  },

  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped lang="scss">
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}
</style>
